<template>
	<view class="container">
		<view class="logo-wrap">
			<image src="/static/logo.png" class="logo" mode="widthFix"></image>
		</view>
		<view class="logo-txt">
			<text class="logo-txt-1">野人体育</text>
			<view class="flex-align">
				<text class="logo-txt-1">做自己的英雄</text>
				<image src="/static/icon/login_icon.png" class="logo-txt-ico" mode="widthFix"></image>
			</view>
		</view>
		<view class="content-btm">
			<button
				type="primary"
				open-type="getPhoneNumber"
				@getphonenumber="getPhonenumber"
				class="auth-btn"
				v-if="agreeChecked.length"
			>
				微信授权手机号登录
			</button>
			<button type="primary" class="auth-btn" @click="toLogin" v-else>微信授权手机号登录</button>
			<view class="btn-yzm" @click="$utils.navigateTo(false, '/pages/login/login')"
				>验证码登录</view
			>
			<u-checkbox-group
				v-model="agreeChecked"
				placement="row"
				@change="onChange"
				activeColor="#e50012"
			>
				<view class="checkGroup" :class="{ checked: agreeChecked.length }">
					<u-checkbox
						shape="circle"
						name="agree"
						label="已阅读并同意"
						labelSize="24rpx"
						labelColor="#999"
					></u-checkbox>
					<text @click.stop="checkboxClick" class="blue">《用户注册协议和隐私政策》</text>
				</view>
			</u-checkbox-group>
		</view>
		<Policy ref="policy"></Policy>
	</view>
</template>

<script>
import Common from '@/utils/common.js'
import { WXBizDataCrypt } from '@/utils/mpWx.js'
import Policy from './component/policy.vue'
export default {
	components: {
		Policy
	},
	data() {
		return {
			isLogin: false,
			agreeChecked: [], //是否选中协议
			code: ''
		}
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		wx.login({
			success: (res) => {
				if (res.errMsg === 'login:ok') {
					this.code = res.code
				} else {
					uni.$u.toast(res.errMsg)
				}
			},
			fail: (error) => {
				console.log(error)
			}
		})
		// #endif
	},
	methods: {
		onChange(event) {
			console.log(event)
			this.agreeChecked = event
		},
		toLogin() {
			if (this.agreeChecked.length == 0) {
				uni.$u.toast('登录前请认真阅读用户协议，并同意')
				return
			}
		},
		getPhonenumber(e) {
			console.info('e', e)
			const that = this
			if (e.detail.errMsg != 'getPhoneNumber:ok') {
				//用户拒绝授权
				uni.$u.toast('您已拒绝我们使用您的公开信息，请点击确定重新授权进行登录')
			} else {
				//允许授权
				console.log(e.detail.encryptedData)
				let params = { code: e.detail.code }
				//小程序数据解密
				WXBizDataCrypt(params)
					.then((res) => {
						const result = { data: !res.data.token ? { phone: res.data } : res.data }
						Common.HokdoInit(result)
					})
					.catch((error) => {
						if (error == 'code001:IllegalBuffer') {
							uni.$u.toast('授权失败，请重新授权登录')
						} else {
							uni.$u.toast(error)
						}
					})
			}
		},
		checkboxClick() {
			this.$refs.policy.load()
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	background: linear-gradient(180deg, #ffe6e6, #ffffff);
	min-height: 100vh;
	width: 100%;
	position: relative;
	.logo {
		width: 360rpx;
		height: 360rpx;
		display: block;
		margin: 0 auto;
		&-wrap {
			padding: 220rpx 0 150rpx;
		}
		&-txt {
			margin-left: 94rpx;

			&-1 {
				display: block;
				font-size: 44rpx;
				color: #333;
				margin-top: 20rpx;
			}
			&-ico {
				width: 70rpx;
				margin: 6rpx 20rpx 0;
			}
		}
	}
	.content-btm {
		margin: 150rpx 0 20rpx;
	}
	.auth-btn {
		width: 600rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #e50012;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #fff;
		// margin-bottom: 260rpx;
	}
	.btn-yzm {
		width: 560rpx;
		color: #e50012;
		text-align: right;
		margin: 20rpx auto 210rpx;
	}
}
.checkGroup {
	margin: 0 auto;
	font-size: 24rpx;
	color: #a4c6f7;
	display: flex;
	align-items: center;
	justify-content: center;
}
.default-checkbox {
	font-size: 24rpx;
	color: #ccc;
}
.default-checkbox-icon {
	display: block;
	width: 24rpx;
	height: 24rpx;
	border: 1px solid #ccc;
	border-radius: 50%;
	border-width: 2px;
	margin-right: 10rpx;
}
::v-deep .checkGroup .u-checkbox__icon-wrap--circle {
	border-color: #999 !important;
	border-width: 2px;
	width: 30rpx !important;
	height: 30rpx !important;
}
::v-deep .checked .u-checkbox__icon-wrap--circle {
	border-color: #e50012 !important;
}
.blue {
	color: #999;
}
</style>
